<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { formatTime } from '@/assets/js/utils';
import { ElMessageBox } from 'element-plus';
import useUserStore from '@/store/user';
import Reply from './Reply.vue';
import { ref } from 'vue';
import router from '@/router';
import { LOGIN } from '@/router/routeMap';
import Logo from '@/components/Logo.vue'

const props = defineProps({
  question: Object,
  questionUserinfo: Object,
})
const emit = defineEmits(['clickDelete', 'clickEditQuestion'])

const onClickDelete = () => {
  ElMessageBox.alert('确认删除该提问吗？', {
    confirmButtonText: '确认',
    callback: (action) => {
      if (action === 'confirm') {
        emit('clickDelete')
      }
    }
  })
}

const onClickEdit = () => {
  ElMessageBox.prompt('请输入问题', '编辑', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputValue: props.question?.content || ''
  })
    .then(({ value }) => {
      emit('clickEditQuestion', value)
    })
    .catch(console.log)
}

const showReply = ref(false)
const userStore = useUserStore()
const onClickReply = () => {
  if (userStore.isLogined) {
    showReply.value = !showReply.value
  } else {
    ElMessageBox.alert('需要登录后才能回复', '前往登录', {
      confirmButtonText: '前往登录',
      callback(action) {
        if (action === 'confirm') {
          router.push({ ...LOGIN, params: { redirect: router.currentRoute?.value?.fullPath } })
        }
      }
    })
  }
}
</script>

<template>
  <div class="description-container">
    <div class="title">
      <Logo style="margin-right: 60px" />
      <el-descriptions class="description" v-if="question && questionUserinfo">
        <template #title>
          <h1>
            <!-- {{ question }} -->
            {{ question.content }}
            <el-button
              v-if="question.questioner === userStore.userinfo?.id"
              size="small"
              type="warning"
              :icon="Edit"
              @click="onClickEdit"
            />
            <el-button
              v-if="userStore.userinfo?.isAdmin"
              size="small"
              type="danger"
              :icon="Delete"
              @click="onClickDelete"
            />
          </h1>
        </template>
        <template #extra>
          <el-button
            size="small"
            type="success"
            :icon="Edit"
            @click="onClickReply"
          >{{ showReply ? '收起' : '我来回答' }}</el-button>
        </template>
        <el-descriptions-item
          label="提问者："
          label-class-name="description-label"
        >{{ questionUserinfo.username === 'visitor' ? '匿名网友' : questionUserinfo.username }}</el-descriptions-item>
        <el-descriptions-item
          label="时间："
          label-class-name="description-label"
        >{{ formatTime(question.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="查阅次数：" label-class-name="description-label">
          <el-tag type="info">{{ question.weight }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <transition name="heightSlate">
      <div class="reply-container" v-if="showReply">
        <Reply @clickReply="$attrs.onClickReply" />
      </div>
    </transition>
  </div>
</template>


<style lang="sass" scoped>

.description-container
  background-color: white
  display: grid
  grid-template-rows: 120px 1fr
  box-shadow: 0 2px 2px -1px #bfbfbf
  position: relative
  z-index: 1
  .title
    padding: 0 60px
    display: flex
    align-items: center
  .description
    flex: auto
    :deep(.description-label)
      margin-right: 0

.reply-container
  width: 100%
  overflow: hidden
  margin: auto
  background-color: white
  padding: 14px 60px

.heightSlate-enter-from, .heightSlate-leave-to
  height: 0
.heightSlate-enter-active, .heightSlate-leave-active
  transition: height 0.3s ease
.heightSlate-enter-to, .heightSlate-leave-from
  height: calc(100vh - 130px)
</style>